<template>
  <div class="paper">
    <div class="top">
      <div class="form-item">
         <span>试卷名称： </span>
        <el-select v-model="formData.paper_name" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <!-- <div class="form-item">
         <span>用户查询： </span>
        <el-select v-model="formData.paper_name" placeholder="请选择">
          <el-option
            v-for="item in category"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div> -->
      <!-- <div class="form-item">
         <span>搜索标题： </span>
        <el-input style="flex:1" v-model="formData.title" placeholder="请输入搜索内容"></el-input>
      </div> -->
      <div class="form-item">
        <el-button @click="clearAll">清除</el-button>
        <el-button type="primary" @click="getSearch">搜索</el-button>
      </div>
    </div>
    <div class="info">
      <div style="margin-bottom:10px;display:flex;justify-content: flex-end;">
        <!-- <el-button type="primary" @click="addItem">新增</el-button> -->
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
      type="index"
      label="排名"
      width="100">
    </el-table-column>
        <el-table-column
          prop="user_name"
          label="用户名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="paper_name"
          label="试卷名称"
          >
        </el-table-column>
        <el-table-column
          prop="score"
          label="获得分数"
          width="180">
        </el-table-column>
        <!-- <el-table-column
          prop="law_base"
          label="试卷种类"
          width="180">
        </el-table-column>
        <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'scoreManage',
  data(){
    let arr =[]
    for (let i =1;i<13 ; i++){
      arr.push({
        value:(2022-i)+'法律硕士专业学位联考（法学）',
        label:(2022-i)+'法律硕士专业学位联考（法学）'
      })
      arr.push({
        value:(2022-i)+'法律硕士专业学位联考（非法学）',
        label:(2022-i)+'法律硕士专业学位联考（非法学）'
      })
    }
    return{
      options:arr,
      category:arr,
      formData:{
        user_name:'',
        paper_name:''
      },
      tableData:[
      ],
  
    }
  },
  components: {

  },
  mounted(){

  },
  methods:{
    clearAll(){
      this.formData={
         user_name:'',
        paper_name:''
      }
    },
      getSearch(){
        let data = this.formData
        this.$http.getScore(data).then(res=>{
          this.tableData = res.data.data.sort(function(a,b){
            return b.score-a.score
          })
        }).catch(err=>{
          console.log(err);
        })
      }
  }
}
</script>
<style lang="less" scoped>
.paper{
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  
}
.top{
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 24px;
    background-color: #fff;
    margin-bottom: 10px;
    box-shadow: 0 1px 8px 0 rgb(0 0 0 / 4%);
}
    .form-item{
      width: 30%;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      
    }
.info{
  width: 100%;
  height: calc(100% - 224px);
  background-color: #fff;
  padding: 40px;
  overflow-y: auto;
}
</style>